<template>
    <div class="cpd-order rocket-content">
      <div class="rocket-input-wrap" style="position: relative;">
        <span class="rocket-label-name">投放日期</span>
        <el-date-picker
            @change="getList(1)"
            style="width: 300px;"
            v-model="date"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <span class="rocket-label-name mar-lt">游戏信息</span>
        <el-input
            placeholder="输入游戏名称"
            clearable
            @keyup.enter.native="getList(1)"
            style="width:500px;"
            v-model.trim="keyword">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button type="primary" class="mar-lt" @click="getList(1)">搜索</el-button>
        <el-button type="primary" class="btn" @click="createOrder">创建订单</el-button>
      </div>
      <div class="rocket-table-content">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column type="expand">
            <template>
              <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                  label="商品 ID"
                  prop="id">
                </el-table-column>
                <el-table-column
                  label="商品名称"
                  prop="name">
                </el-table-column>
                <el-table-column
                  label="描述"
                  prop="desc">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            label="商品 ID"
            prop="id">
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="name">
          </el-table-column>
          <el-table-column
            label="描述"
            prop="desc">
          </el-table-column>
        </el-table>
      </div>
      <div class="mar-tp">
          <el-pagination
              @size-change="sizeChange"
              @current-change="pageChange"
              :current-page="pageNum"
              :page-sizes="_pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
      </div>
    </div>
</template>

<script>
export default {
    data() {
      return {
        date: [],
        keyword: '',
        pageNum: 1,
        pageSize: this._pageSize,
        total: 0,
        tableData: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
      }
    },
    mounted () {
    },
    methods: {
      createOrder() {
        console.log('创建订单~~~')
        this.$router.push('/rocket/createOrder')
      },
      getList() {},
      sizeChange (val) {
        this.pageSize = val
        this.getList(1)
      },

      pageChange (val) {
          this.getList(val)
      },
    },
}
</script>

<style lang="scss">
  .cpd-order {
    .btn {
      position: absolute;
      right: 10px;
      top: 0px;
    }
  }
</style>
